<template>
	<view class="address-container">
		<view class="address-list">
			<u-swipe-action v-for="(item, index) in addressList" :key="index" :options="swipeOptions">
				<view class="address-item">
					<view class="address-info">
						<view class="location">
							<text class="tag" v-if="item.isDefault">默认</text>
							<text class="name">{{item.name}}</text>
						</view>
						<view class="detail">{{item.region}}{{item.address}}</view>
						<view class="contact">{{item.phone}}</view>
					</view>
					<view class="edit-btn" @click="handleEdit(item)">
						<text class="edit-icon">✏️</text>
					</view>
				</view>
			</u-swipe-action>
		</view>

		<view class="add-btn">
			<u-button type="primary" text="添加新地址" @click="handleAdd"></u-button>
		</view>

		<!-- 编辑地址弹窗 -->
		<u-popup :show="showEdit" mode="bottom" @close="showEdit = false">
			<view class="edit-popup">
				<view class="popup-header">
					<text>{{isAdd ? '添加地址' : '编辑地址'}}</text>
					<text class="close-btn" @click="showEdit = false">×</text>
				</view>
				<view class="popup-content">
					<u-form :model="form" ref="uForm" :rules="rules">
						<u-form-item label="联系人" prop="name">
							<u-input v-model="form.name" placeholder="请输入联系人姓名"></u-input>
						</u-form-item>
						<u-form-item label="手机号" prop="phone">
							<u-input v-model="form.phone" placeholder="请输入手机号"></u-input>
						</u-form-item>
						<u-form-item label="所在地区" prop="region">
							<selectAddress @change="onAddressChange" />
						</u-form-item>
						<u-form-item label="详细地址" prop="address">
							<u-input 
								v-model="form.address" 
								type="textarea"
								placeholder="请输入详细地址"
							></u-input>
						</u-form-item>
						<u-form-item>
							<u-checkbox-group>
								<u-checkbox v-model="form.isDefault">设为默认地址</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</u-form>
					<u-button type="primary" @click="saveAddress">保存</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import selectAddress from '@/components/DaBaieX-SelectAddress/index.vue'

export default {
	components: {
		selectAddress
	},
	data() {
		return {
			colors: '#1296db',  // 主题色
			show: false,        // 是否显示选择器
			province: "",       // 省份
			city: "",          // 城市
			area: "",          // 区域
			areaCode: "",      // 区域编码
			form: {
				name: '',
				phone: '',
				address: '',    // 详细地址
				region: '',     // 省市区
				isDefault: false
			},
			rules: {
				name: [{
					required: true,
					message: '请输入联系人',
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '请输入手机号',
					trigger: ['blur', 'change']
				}],
				region: [{
					required: true,
					message: '请选择所在地区',
					trigger: ['blur', 'change']
				}],
				address: [{
					required: true,
					message: '请输入详细地址',
					trigger: ['blur', 'change']
				}]
			},
			addressList: [
				{
					id: 1,
					name: '张三',
					phone: '13800138000',
					region: '广东省深圳市南山区',
					address: '科技园南区',
					isDefault: true
				},
				{
					id: 2,
					name: '李四',
					phone: '13800138001',
					region: '广东省深圳市福田区',
					address: '中心区',
					isDefault: false
				}
			],
			swipeOptions: [
				{
					text: '删除',
					style: {
						backgroundColor: '#fa3534'
					}
				}
			],
			showEdit: false,
			isAdd: false
		}
	},
	methods: {
		// 打开地址选择器
		openPicker() {
			console.log('执行打开地址选择器')
			this.show = true
		},

		// 地址选择变化回调
		changeClick(data) {
			console.log('地址选择器变化:', data)
			if (data) {
				this.province = data.province || ''
				this.city = data.city || ''
				this.area = data.area || ''
			}
		},

		// 关闭地址选择器
		onhideShow() {
			this.show = false
			console.log('执行了关闭地址选择器')
		},

		// 确认选择地址
		onsetCity(data) {
			console.log('确认选择地址:', data)
			if (data && data.province && data.city && data.area) {
				const region = `${data.province}${data.city}${data.area}`
				this.form.region = region
				this.province = data.province
				this.city = data.city
				this.area = data.area
				this.show = false
			}
		},

		onAddressChange(e) {
			console.log('地址选择变化:', e)
			const { province, city, county } = e
			this.form.region = `${province}-${city}-${county}`
		},

		handleAdd() {
			this.isAdd = true
			this.form = {
				name: '',
				phone: '',
				address: '',
				region: '',
				isDefault: false
			}
			this.province = ''
			this.city = ''
			this.area = ''
			this.showEdit = true
		},

		handleEdit(item) {
			this.isAdd = false
			this.form = { ...item }
			// 解析省市区
			if (item.region) {
				// 这里需要根据实际数据格式调整解析逻辑
				const [province, city, area] = item.region.match(/.{2,}/g) || ['', '', '']
				this.province = province
				this.city = city
				this.area = area
			}
			this.showEdit = true
		},

		saveAddress() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// TODO: 保存地址到后端
					uni.showToast({
						title: this.isAdd ? '添加成功' : '修改成功',
						icon: 'success'
					})
					this.showEdit = false
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.address-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;

	.address-list {
		.address-item {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.address-info {
				flex: 1;

				.location {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.tag {
						background-color: #1296db;
						color: #fff;
						font-size: 24rpx;
						padding: 4rpx 12rpx;
						border-radius: 4rpx;
						margin-right: 20rpx;
					}

					.name {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.detail {
					color: #333;
					margin-bottom: 10rpx;
				}

				.contact {
					color: #666;
					font-size: 28rpx;
				}
			}

			.edit-btn {
				padding: 20rpx;

				.edit-icon {
					font-size: 40rpx;
				}
			}
		}
	}

	.add-btn {
		position: fixed;
		bottom: 40rpx;
		left: 20rpx;
		right: 20rpx;
	}

	.edit-popup {
		padding: 30rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;

				&.close-btn {
					font-size: 48rpx;
					color: #666;
					padding: 0 20rpx;
				}
			}
		}

		.popup-content {
			.u-button {
				margin-top: 30rpx;
			}
		}
	}

	.region-select {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.placeholder {
			color: #999;
		}

		.arrow {
			color: #666;
			font-size: 24rpx;
		}
	}
}
</style>
